<template>
  <div border-top-1px
       class="wrapper">
    <div class="content"
         border-bottom-1px>
      <div class="more">
        <div class="title">{{title}}</div>
        <router-link class="comments"
                     tag="div"
                     :to="'/detail/'+ id +'/merchant'">{{comments}}条评论
          <span class="iconfont comment-icon">&#xe65c;</span>
        </router-link>
      </div>
      <div class="score">
        <common-star :score="star"></common-star>
      </div>
      <div class="comments-list">
        <common-comments :list="truncationLists"
                         class="comments-wrap"></common-comments>
      </div>
    </div>
  </div>
</template>

<script>
import CommonStar from 'common/star/Star'
import CommonComments from 'common/comments/Comments'
export default {
  name: 'CommonEvaluate',
  components: {
    CommonStar,
    CommonComments
  },
  props: {
    title: {
      type: String,
      default: '商家评价'
    },
    evaluate: {
      type: Object
    }
  },
  data () {
    return {
      show: false
    }
  },
  computed: {
    comments () {
      return this.evaluate.commentsTotal
    },
    star () {
      return parseInt(this.evaluate.score)
    },
    id () {
      return this.$route.params.id
    },
    lists () {
      const result = []
      const comments = this.evaluate.comments
      result.push(...comments)
      return result
    },
    truncationLists () {
      const result = []
      const comments = this.evaluate.comments
      result.push(...comments)
      return result.slice(0, 2)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  background-color $bgcWh

  .content
    padding-top 20px
    box-sizing border-box

    .more
      display flex
      justify-content space-between
      align-items center
      padding()

      .title
        font-size $fzThird
        color $fzColor
        line-height 53px

      .comments
        font-size $smallFz
        color $graySecond

        .comment-icon
          font-size 40px
          color $graySecond
          vertical-align -6px

    .score
      height 45px
      display flex
      align-items center
      padding()
</style>
